<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <style>
        div {
            width: 100%;
            height: 100%;
        }

        .year,
        .month,
        .day,
        .time,
        .divide,
        .sec {
            width: 100px;
            height: 100px;
            background-color: #424242;
            color: #fff;
            text-align: center;
            font-size: 30px;
            margin-top: 100px;
            margin-left: 20px;
            float: left;
            line-height: 100px;
        }

        .w,
        .a {
            width: 60px;
            height: 100px;
            background-color: #424242;
            color: #fff;
            text-align: center;
            font-size: 50px;
            margin-top: 100px;
            margin-left: 20px;
            float: left;
            line-height: 100px;
        }

        .second {
            -webkit-animation: second 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
            animation: second 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
        }

        @-webkit-keyframes second {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
                opacity: 1;
            }

            100% {
                -webkit-transform: translateY(-1000px);
                transform: translateY(-1000px);
                opacity: 0;
            }
        }

        @keyframes second {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0);
                opacity: 1;
            }

            100% {
                -webkit-transform: translateY(-1000px);
                transform: translateY(-1000px);
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div>
        <div class="year"></div>
        <div class="a">-</div>
        <div class="month"></div>
        <div class="a">-</div>
        <div class="day"></div>
        <div class="time"></div>
        <div class="w">:</div>
        <div class="divide"></div>
        <div class="w">:</div>
        <div class="sec"></div>
    </div>
</body>
<script>
    $(function () {
        setInterval(function () {
            //  $('.divide').addClass('second')
            $('.sec').addClass('second')


            setTimeout(function () {
                //  $('.divide').removeClass('second')
                $('.sec').removeClass('second')
            }, 500)
            showData()
        }, 1000)
        // // if () {
        //     setInterval(function(){ 
        //      $('.divide').addClass('second')
        //     //  $('.sec').addClass('second')

        //      setTimeout(function(){
        //          $('.divide').removeClass('second')
        //         //  $('.sec').removeClass('second')
        //      },500)
        //      showData()
        // },1000)
        // // }
    })

    function showData() {
        var obj = new Date(),
            yearobj = obj.getFullYear(),
            monthobj = obj.getMonth() + 1,
            dayobj = obj.getDate(),
            timeobj = obj.getHours(),
            divideobj = obj.getMinutes(),
            secobj = obj.getSeconds()

        $('.year').html(yearobj)
        $('.month').html(monthobj)
        $('.day').html(dayobj)
        $('.time').html(timeobj)
        $('.divide').html(divideobj)
        $('.sec').html(secobj)
    }

</script>

</html>